import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:tplib/base/base_view.dart';
import 'package:tplib/utils/image_utils.dart';
import 'package:tplib/widgets/comm_status_button.dart';
import 'package:tplib/widgets/comm_textfield.dart';
import 'package:tplib/widgets/comm_widget_manager.dart';
import 'package:tplib/widgets/simple_button.dart';
import 'package:tplib_example/utils/res_utils.dart';
import 'package:tplib_example/viewmodel/login_viewmodel.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return BaseView(
        model: LoginViewModel(),
        builder: (LoginViewModel model){
          return CommWidgetManager.CommPageScaffoldWidget(
              context,
            isShowBg: false,
            body: SingleChildScrollView(
              padding: EdgeInsets.only(
                left: PxUtils.px_30,
                right: PxUtils.px_30,
              ),
              child:Container(
                width: PxUtils.screenWidth,
                height: PxUtils.screenHeight-PxUtils.statusBarHeight
                // -PxUtils.px_68
                ,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(
                        height: PxUtils.px_62
                    ),
                    //标题
                    Text(
                      '${StringUtils.hello}!\n${StringUtils.logintopoint}',
                      style: TextStyle(
                          fontWeight: FontWeight.w600,
                          color: ColorUtils.color_222222,
                          fontSize: PxUtils.px_22
                      ),
                    ),
                    SizedBox(
                      height: PxUtils.px_104,
                    ),
                    Container(
                      child: Text(
                        '${StringUtils.account}',
                        style: TextStyle(
                            fontWeight: FontWeight.w600,
                            color: ColorUtils.color_383838,
                            fontSize: PxUtils.px_14
                        ),
                      ),
                    ),
                    SizedBox(
                      height: PxUtils.px_12,
                    ),
                    //手机号输入框
                    Container(
                        width: PxUtils.screenWidth,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(PxUtils.px_4),
                            border: Border.all(
                              color: ColorUtils.color_main,
                            )
                        ),
                        padding: EdgeInsets.only(
                          left: PxUtils.px_15,
                          right: PxUtils.px_15,
                        ),
                        height: PxUtils.px_50,
                        child: Obx(()=>CommTextField(
                          defaultUnderlineColor: ColorUtils.color_transparent,
                          foucosUnderlineColor: ColorUtils.color_transparent,
                          lableText: StringUtils.pleaseinput+StringUtils.account,
                          lableTextStyle: TextStyle(fontSize: PxUtils.setSize(PxUtils.px_14),color: ColorUtils.color_999999),
                          textStyle: TextStyle(fontSize: PxUtils.setSize(PxUtils.px_14),color: ColorUtils.color_333333),
                          paddingBottm: PxUtils.setSize(PxUtils.px_4),
                          // inputFormatters: [WhitelistingTextInputFormatter(RegExp("[0-9a-zA-Z._@]"))],
                          // keyboardType: TextInputType.phone,
                          isShowDeleteMain: true,
                          maxLength: 11,
                          maxLines: 1,
                          defaultCont: '${model.account.obs}',
                          textInputAction: TextInputAction.next,
                          onChanged: (value)=>model.inputChanged(value,0),
                        ))
                    ),
                    SizedBox(
                      height: PxUtils.px_30,
                    ),
                    //密码输入框
                    Container(
                      child: Text(
                        '${StringUtils.password}',
                        style: TextStyle(
                            fontWeight: FontWeight.w600,
                            color: ColorUtils.color_383838,
                            fontSize: PxUtils.px_14
                        ),
                      ),
                    ),
                    SizedBox(
                      height: PxUtils.px_12,
                    ),
                    Container(
                        width: PxUtils.screenWidth,
                        margin: EdgeInsets.only(
                          // top: PxUtils.setSize(PxUtils.px_30),
                        ),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(PxUtils.px_4),
                            border: Border.all(
                              color: ColorUtils.color_main,
                            )
                        ),
                        padding: EdgeInsets.only(
                          left: PxUtils.px_15,
                          right: PxUtils.px_15,
                        ),
                        height: PxUtils.px_50,
                        child: Obx(()=>CommTextField(
                          // defaultUnderlineColor: ColorUtils.color_d8d8d8,
                          // foucosUnderlineColor: ColorUtils.color_main,
                          defaultUnderlineColor: ColorUtils.color_transparent,
                          foucosUnderlineColor: ColorUtils.color_transparent,
                          lableText: StringUtils.pleaseinput+StringUtils.password,
                          lableTextStyle: TextStyle(fontSize: PxUtils.setSize(PxUtils.px_14),color: ColorUtils.color_999999),
                          textStyle: TextStyle(fontSize: PxUtils.setSize(PxUtils.px_14),color: ColorUtils.color_333333),
                          paddingBottm: PxUtils.setSize(PxUtils.px_4),
                          isShowDeleteMain: false,
                          isInputPwd: true,
                          defaultCont: '${model.password.obs}',
                          inputFormatters: [WhitelistingTextInputFormatter(RegExp("[0-9A-Za-z,.@]"))],
                          onChanged: (value)=>model.inputChanged(value,1),
                        ))
                    ),
                    //忘记密码
                    // Container(
                    //   margin: EdgeInsets.only(
                    //     top: PxUtils.setSize(PxUtils.px_8),
                    //   ),
                    //   child: Row(
                    //     mainAxisAlignment: MainAxisAlignment.end,
                    //     children: [
                    //       SimpleButton(
                    //           child: Text(
                    //             '${StringUtils.forgetpassword}?',
                    //             style: TextStyle(fontSize: PxUtils.px_14,color: ColorUtils.color_main),
                    //           ),
                    //           onPressed: ()=>model?.toForgetPasseord()
                    //       )
                    //     ],
                    //   ),
                    // ),
                    //登录
                    Container(
                      margin: EdgeInsets.only(
                        top: PxUtils.px_50,
                      ),
                      child:
                      Obx(()=>CommStatusButton(
                        onPressed: ()=>model.login(),
                        width: PxUtils.screenWidth,
                        bgColor: model.isLoginFocus.value? ColorUtils.color_main : ColorUtils.color_6ebde,
                        defualtText:  '${StringUtils.login}',
                      )),
                    ),
                    //点击用户协议
                    Expanded(
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            SimpleButton(
                              onPressed: ()=>model.selectAgreement(),
                              child: Container(
                                margin: EdgeInsets.only(
                                    // bottom: PxUtils.px_2
                                ),
                                child: Obx(()=>ImageUtils.loadAssetImage(
                                    model.isAgreementSelected.value?DrawableUtils.icon_selected:DrawableUtils.icon_unselected,
                                    width: PxUtils.px_16,
                                    // package:'momapp'
                                )),
                              ),
                            ),
                            SizedBox(
                              width: PxUtils.px_5,
                            ),
                            Text(
                              StringUtils.please+StringUtils.readand+StringUtils.agree,
                              style: TextStyle(
                                  fontSize: PxUtils.px_13,
                                  color: ColorUtils.color_999999
                              ),
                            ),
                            SimpleButton(
                              onPressed: ()=>model.toUserAgreement(),
                              child: Text(
                                '《${StringUtils.useprivacyagreement}》',
                                style: TextStyle(
                                    fontSize: PxUtils.px_13,
                                    color: ColorUtils.color_main
                                ),
                              ),
                            ),
                            // SimpleButton(
                            //   onPressed: ()=>model?.toUserAgreement(),
                            //   child: Text(
                            //     '《${StringUtils.useagreement}》',
                            //     style: TextStyle(
                            //         fontSize: PxUtils.px_13,
                            //         color: ColorUtils.color_main
                            //     ),
                            //   ),
                            // ),
                            // Text(
                            //   StringUtils.he,
                            //   style: TextStyle(
                            //       fontSize: PxUtils.px_13,
                            //       color: ColorUtils.color_999999
                            //   ),
                            // ),
                            // SimpleButton(
                            //   onPressed: ()=>model?.toPrivacyPolicy(),
                            //   child: Text(
                            //     '《${StringUtils.privacypolicy}》',
                            //     style: TextStyle(
                            //         fontSize: PxUtils.px_13,
                            //         color: ColorUtils.color_main
                            //     ),
                            //   ),
                            // ),
                          ],
                        )
                    ),
                    SizedBox(
                      height: PxUtils.screenHeight/16,
                    ),
                  ],
                ),
              ),
            )
          );
        }
    );
  }
}
